<template>
  <view class="goods-detail">
   <view class="topCard">
    <!-- 1 轮播图 -->
    <u-swiper
      bg-color="#fff"
      :list="goods.pics"
      name="pics_big"
      height="497"
      img-mode="aspectFit"
      @click="handlePreviewImage"
    ></u-swiper>

    <view class="goods-brief">
      <view class="goods-price">¥{{goods.goods_price}}</view>
      <view class="goods-name u-line-3">{{goods.goods_name}}</view>
    </view>
    </view>
     
     <view class="details">
       <view class="goods-title">图文详情</view>
       <view class="goods-introduce">
         <u-parse :html="goods.goods_introduce"></u-parse>
       </view>
     </view> 

       <!-- 底部 -->
     <!-- <SubmitBar class="submitBar"></SubmitBar> -->
     <view class="navigation">
		<view class="left">
			<view class="item">
				<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-line-1">联系客服</view>
			</view>
      
			<navigator url="/pages/cart/cart" open-type="switchTab" class="item car">
				<u-badge class="car-num" :count="count" type="error" :offset="[-3, -6]"></u-badge>
				<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
        
				<view class="text u-line-1">购物车</view>
        
			</navigator>
    
		</view> 
		<view class="right">
			<view class="cart btn u-line-1" @click="handleCartAdd">加入购物车</view>
			<view class="buy btn u-line-1">立即购买</view>
		</view>
	</view>
  </view>
  
</template>

<script>
import {mapState,mapMutations} from 'vuex'
export default {
  data() {
    return {
      // 商品信息
      goods: null,
    };
  },
  computed: {
     ...mapState({
       count:(state)=>
         state.cart.cartList.reduce((count,item)=>(count+=item.nums),0)
     })
  },
  onLoad({ goods_id }) {
    goods_id = goods_id || 47868;
    // 获取商品详情
    this.getGoodsDetail(goods_id);
  },
   
  methods: {
    ...mapMutations(["cart/cartAdd"]),
    // 获取商品详情
    async getGoodsDetail(goods_id) {
      this.goods = await this.$u.get("/goods/detail", { goods_id });
    },
    handlePreviewImage(index){
        const urls=this.goods.pics.map(pic=>pic.pics_big)
        // console.log(urls);
        const current = urls[index]
        uni.previewImage({urls,current})
    },
    handleCartAdd(){
      this["cart/cartAdd"]({value:this.goods})
    }
  },
};
</script>

<style lang="scss">
.goods-detail{
  background-color: #f9f9f9;
  padding-bottom: 102rpx;
  .topCard{
    border-radius: 15rpx;
    background-color: #fff;
    .goods-brief{
        margin-top: 50rpx;
      .goods-price{
        color: red;
        font-size: 35rpx;
        margin-left: 58rpx;
    }
    .goods-name{
        width: 681rpx;
        height: 120rpx;
        margin: 20rpx 35rpx 0rpx;
        font-weight: 700;
    }
    }
  }
    
    .details{
      margin-top: 20rpx;
      background-color: #fff;
      border-radius: 15rpx;
      .goods-title{
        font-weight: 700;
        padding-top: 20rpx;
        font-size: 30rpx;
        text-align: center;
      }
      .goods-introduce{
         margin-top: 20rpx;
      }
    }
}
.submitBar{
  width: 100%;
 position:fixed;
  bottom: 0rpx;
  
}
.navigation {
   position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
	display: flex;
	margin-top: 100rpx;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 16rpx 0;
	.left {
        margin-left: 30rpx;
		display: flex;
		font-size: 20rpx;
        text-align: center;
		.item {
			margin: 0 30rpx;
			&.car {
				text-align: center;
				position: relative;
				.car-num {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
		}
	}
	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;
        margin-left: 42rpx;
		.btn {
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
		}
		.cart {
			background-color: #fcaa23;
			margin-right: 30rpx;
		}
		.buy {
			background-color: #ea4350;
		}
	}
}
</style>